package com.csw.compose.ui.module.component.base

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Switch
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun SwitchPagePreview() {
    BasePage({}, "开关（Switch）") {
        SwitchPage()
    }
}

class SwitchPageData {
    companion object : Destination("SwitchPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/switch?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SwitchPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("滑块，类似Seekbar用户可以拖动滑块在范围内选择数值")

        val state = remember { mutableStateOf(false) }
        Switch(
            checked = state.value,
            onCheckedChange = { state.value = it },
            thumbContent = {
                Icon(
                    Icons.Filled.Done, "", Modifier.padding(5.dp), tint = if (state.value) {
                        MaterialTheme.colorScheme.primary
                    } else {
                        MaterialTheme.colorScheme.onPrimary
                    }
                )
            }
        )
        UlItem("Switch")
        LabelText("开关组件")
        OlItem(1, "checked")
        LabelText("选中状态")
        OlItem(2, "onCheckedChange")
        LabelText("监听选中状态改变")
        OlItem(3, "thumbContent")
        LabelText("开关内容图标")

    }
}